import TauActionPanel from '@/components/TauActionPanel';
import TauPage from '@/components/TauPage';
import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { Button, Drawer } from '@alifd/next';
import { t } from '@lingui/macro';
import { uniqueId } from 'lodash';
import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';
import { column, toSelectDataSource, ENUMS } from './stores/definitions';
import { toJS } from 'mobx';

const tableId = uniqueId('tauTable-');

const PV = () => {
  const { pVStore: store } = useStore();

  // 获取列表数据
  const handleOnSearch = (params) => {
    const { getOnDate, ...searchArgs } = params.values;
    const [from, to] = getOnDate || [];
    store.search = {
      from,
      to,
      ...searchArgs,
    };
  };

  return (
    <TauPage className="page-container">
      <TauActionPanel
        onSearch={handleOnSearch}
        searchItems={[
          {
            name: 'getOnDate',
            type: 'date-range',
            props: {
              placeholder: [t`开始时间`, t`结束时间`],
            },
          },
          {
            name: 'scope',
            type: 'select',
            props: {
              dataSource: toSelectDataSource(ENUMS.scopes),
              placeholder: t`程序类型`,
            },
          },
        ]}
        keywordSearch={{
          // enabled: true,
          placeholder: t`请输入关键字搜索`,
        }}
        className="action-panel"
      />
      <div className="content">
        <TauTable
          instanceId={tableId}
          primaryKey="id"
          tableLayout="fixed"
          currentPage={store.pg.page}
          pageSize={store.pg.size}
          total={store.total}
          onFetch={(pg) => { store.pg = pg; }}
          loading={store.loading}
          dataSource={toJS(store.logs)}
          columns={[
            { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
            column('fullname', { width: 100 }),
            column('username', { width: 160 }),
            column('userTypes', { width: 130 }),
            column('fromPage', { width: 150 }),
            column('page', { width: 150 }),
            column('staySecs', { width: 150 }),
            column('crDate', { width: 200 }),
          ]}
        />
      </div>
    </TauPage>
  );
};

export default observer(PV);
